// 主要颜色
$mainColor: #0081ff;
// 输入框阴影
$inputShadow: #797979;
//hover颜色
$hoverColor: #3c9dff;
//禁用颜色
$disabledColor: #a0cfff;

#nprogress .bar {
    background: $mainColor !important;
}

.el-input__wrapper {
    box-shadow: 0 0 0 1px $inputShadow !important;
}

.el-textarea__inner {
    box-shadow: 0 0 0 1px $inputShadow !important;
}

.el-input-group__append {
    padding: 0 !important;
    box-shadow: 0 0 0 1px $inputShadow !important;
}


.el-pagination.is-background .el-pager li.is-active {
    background-color: $mainColor !important;
}

.el-button--primary {
    background-color: $mainColor !important;
}

.el-button.is-disabled {
    background-color: $disabledColor !important;
}

.el-form-item {
    display: block !important;
}

.el-form-item__content {
    flex-wrap: nowrap !important;
}

.el-link--primary {
    color: $mainColor !important;
}

.el-dropdown-menu__item:not(.is-disabled):focus {
    color: $mainColor !important;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
    color: $mainColor !important;
}

.el-breadcrumb__inner a:hover,
.el-breadcrumb__inner.is-link:hover {
    color: $mainColor !important;
}

.el-tabs__item.is-active {
    color: $mainColor !important;
}

.el-tabs__active-bar {
    background-color: $mainColor !important;
}

.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
    width: auto !important;
}

.w-card {
    background-color: #ffffff;
    box-shadow: 0 0 10px #e0e0e0;
}

.f-box {
    display: flex;
    align-items: center;
}

.f-just-a {
    justify-content: space-around;
}

.white-btn {
    font-size: 12px !important;
    color: $mainColor;
    background-color: #ffffff;
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.2s;

    &:hover {
        color: #ffffff;
        background-color: $hoverColor;
    }
}

.tips-box {
    background: url("@a/imgs/tips-background.png") no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 5px;

    >span {
        display: block;
        margin-top: 10px;
        font-size: 14px;
    }
}


.tox-tinymce-aux {
    z-index: 3000 !important;
}

.icon-white {
    box-sizing: border-box;
    padding: 5px;
    background-color: rgba($color: #a5a5a5, $alpha: 0.8);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
        box-shadow: 1px 1px 3px #a5a5a5, -1px -1px 3px #a5a5a5;
    }
}

.change-tab {
    border-radius: 3px;
    border: 1px solid #DEDFE1;
    display: inline-flex;
    box-sizing: border-box;
    padding: 3px 5px;
    font-size: 12px;
    gap: 5px;
    cursor: pointer;

    >.active {
        color: $mainColor !important;
        background-color: rgba($color: $mainColor, $alpha: 0.2);
    }

    >div {
        box-sizing: border-box;
        padding: 3px 5px;
        border-radius: 2px;
        transition: all 0.3s;
        color: #676B74;
    }
}

//指示器
.indicator-box {
    position: fixed;
    right: 5px;
    top: calc(50% - 12.5px);
    z-index: 10;

    .indicator-item {
        background-color: $disabledColor;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s;

        &:not(:first-of-type) {
            margin-top: 5px;
        }
    }

    .active-indicator {
        background-color: $mainColor;
    }
}